<template>
	<!-- 实时访问 -->
	<div class="actual-total">
		<div class="expect-total">预计可访问总量<i>999999</i>次</div>
		<div class="actual-total">
			<div
				v-for="(item, index) in actualTotal.split('')"
				:key="index"
				class="actual-item">
				{{ item }}
			</div>
			<div class="actual-item">次</div>
		</div>
	</div>
	<div id="RealTimeAccessChart" class="echarts"></div>
</template>

<script setup lang="ts">
	import { ref, Ref } from 'vue';
	import { ECharts, init } from 'echarts';
	import 'echarts-liquidfill';
	import useStore from '@/store';
	import { storeToRefs } from 'pinia';

	const { data } = useStore();
	const { dataVisualize } = storeToRefs(data);

	const actualTotal: Ref<string> = ref('000000');

	const initChart = (data: number = 1): ECharts => {
		const charEle = document.getElementById(
			'RealTimeAccessChart'
		) as HTMLElement;
		const charEch: ECharts = init(charEle);
		actualTotal.value = String(
			dataVisualize.value.website_visit_today
		).padStart(6, '0');
		const option = {
			title: [
				{
					text:
						dataVisualize.value.website_visit_today.toFixed(0) +
						'次',
					left: '49%',
					top: '35%',
					textAlign: 'center',
					textStyle: {
						fontSize: '14',
						fontWeight: 'normal',
						color: '#ffffff',
						align: 'center',
						textBorderColor: 'rgba(0, 0, 0, 0)',
						textShadowColor: '#000',
						textShadowBlur: 0,
						textShadowOffsetX: 0,
						textShadowOffsetY: 1
					}
				},
				{
					text: '今日访问量',
					left: '49%',
					top: '25%',
					textAlign: 'center',
					textStyle: {
						fontSize: '15',
						fontWeight: 'normal',
						color: '#ffffff',
						align: 'center',
						textBorderColor: 'rgba(0, 0, 0, 0)',
						textShadowColor: '#000',
						textShadowBlur: 0,
						textShadowOffsetX: 0,
						textShadowOffsetY: 1
					}
				}
			],
			grid: {
				top: '0',
				left: '0px',
				right: '0px',
				bottom: '0',
				containLabel: true
			},
			polar: {
				radius: ['75%', '85%'],
				center: ['50%', '50%']
			},
			angleAxis: {
				max: 120,
				clockwise: false,
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					show: false
				},
				splitLine: {
					show: false
				},
				startAngle: 188
			},
			radiusAxis: {
				type: 'category',
				show: true,
				axisLabel: {
					show: false
				},
				axisLine: {
					show: false
				},
				axisTick: {
					show: false
				}
			},
			series: [
				{
					type: 'liquidFill',
					radius: '70%',
					z: 2,
					center: ['50%', '50%'],
					data: [0.4, 0.4, 0.4], // data个数代表波浪数
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: '#35FAB6' // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(40, 209, 247,0.3)' // 100% 处的颜色
								}
							],
							global: false // 缺省为 false
						}
					},
					outline: {
						borderDistance: 0,
						itemStyle: {
							borderWidth: 2,
							borderColor: '#31d8d5',
							shadowBlur: 20,
							shadowColor: '#50c1a7'
						}
					},
					label: {
						show: false
					},
					backgroundStyle: {
						borderWidth: 1,
						// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
						color: {
							type: 'radial',
							x: 0.5,
							y: 0.5,
							r: 0.5,
							colorStops: [
								{
									offset: 0,
									color: '#0D2648' // 0% 处的颜色
								},
								{
									offset: 0.8,
									color: '#0D2648' // 100% 处的颜色
								},
								{
									offset: 1,
									color: '#228E7D' // 100% 处的颜色
								}
							],
							global: false // 缺省为 false
						}
					}
				},
				{
					type: 'pie',
					radius: ['80%', '80%'],
					center: ['50%', '50%'],
					z: 1,
					label: {
						show: false
					},
					silent: true,
					itemStyle: {
						borderWidth: 2,
						borderType: [8, 10],
						borderDashOffset: 15,
						borderColor: '#31d8d5',
						color: '#11144e',
						borderCap: 'round'
					},
					data: [100]
				},
				{
					type: 'bar',
					data: [55],
					z: 10,
					coordinateSystem: 'polar',
					roundCap: true,
					color: '#31d8d5'
				}
			]
		};
		charEch.setOption(option);
		return charEch;
	};
	defineExpose({
		initChart
	});
</script>
<style lang="scss" scoped>
	.echarts {
		width: 100%;
		height: calc(100% - 50px);
	}
	.actual-total {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 50px;
		margin-top: 10px;
		margin-right: 4px;
		.actual-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 52px;
			height: 50px;
			margin-right: 1px;
			font-family: MetroDF;
			font-size: 32px;
			color: #66ffff;
			background: url('../images/total.png') no-repeat;
			background-size: 100% 100%;
			&:last-child {
				margin-right: 0;
				font-size: 22px;
			}
		}
		.expect-total {
			position: absolute;
			top: -30px;
			right: 5px;
			font-size: 14px;
			color: #ffffff;
			i {
				font-style: normal;
				font-style: oblique;
				color: #ff8100;
			}
		}
	}
</style>
